<div class="layui-fluid" id="VIEW-user-set" lay-title="表单组合">
  <div class="layui-card">
    <div class="layui-card-body" style="padding: 15px;">
      <form class="layui-form" action="" lay-filter="form-group">
        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-block" style="width:120px">
            <input type="text" id="f_username" name="username" lay-verify="number|required|username" autocomplete="off"
              placeholder="请输入用户名" maxlength="10" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
              <div class="layui-inline">
                <input type="text" id="f_name" name="name" lay-verify="required" autocomplete="off" placeholder="请输入姓名"
                  maxlength="15" class="layui-input">
              </div>
              <div class="layui-inline">
                <input type="radio" id="f_sex_m" name="sex" value="男" title="男">
                <input type="radio" id="f_sex_w" name="sex" value="女" title="女">
              </div>
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">学院专业</label>
          <div class="layui-input-block">
            <div class="layui-inline">
              <select name="institute" id="f_institute" lay-verify="required" lay-filter="form-group-institute">
                <option value="">请选择学院</option>
              </select>
            </div>
            <div class="layui-inline">
              <select name="speciality" id="f_speciality" lay-verify="required">
                <option value="">请选择专业</option>
              </select>
            </div>
            <div class="layui-inline" id="f_class" style="width:60px">
              <input type="text" name="class" lay-verify="class" autocomplete="off" placeholder="班级" maxlength="4"
                class="layui-input">
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">MAC地址</label>
          <div class="layui-input-block">
            <div class="layui-inline">
              <i class="layui-icon">&#xe7d8;</i>
            </div>
            <div class="layui-inline" style="width:132px">
              <input type="text" name="phone_mac" lay-verify="mac" autocomplete="off" placeholder="手机MAC地址"
                maxlength="17" class="layui-input">
            </div>
          </div>
          <div class="layui-input-block">
            <div class="layui-inline">
              <i class="layui-icon">&#xe898;</i>
            </div>
            <div class="layui-inline" style="width:132px">
              <input type="text" name="pc_mac" lay-verify="mac" autocomplete="off" placeholder="电脑MAC地址" maxlength="17"
                class="layui-input">
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="form-group-submit">立即提交</button>
            <button type="button" id="f_reset" class="layui-btn layui-btn-primary"
              lay-filter="form-group-reset">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  layui.use(['admin', 'form', 'laydate'], function () {
    var $ = layui.$
      , admin = layui.admin
      , element = layui.element
      , layer = layui.layer
      , laydate = layui.laydate
      , form = layui.form;

    var specialities_list = [];

    admin.get({
      api: 'specialities',
      success: function (res) {
        specialities_list = res.data;
        $("#f_institute").find("option").remove();
        $('#f_institute').append("<option value=''>请选择学院</option>");
        layui.each(res.data, function (index, item) {
          $('#f_institute').append('<option value=' + item.institute + '>' + item.institute + '</option>');

          if (POPUP_DATA.institute == item.institute) {
            $("#f_speciality").find("option").remove();
            $('#f_speciality').append("<option value=''>请选择专业</option>");
            layui.each(item.specialities, function (index, item) {
              $('#f_speciality').append('<option value=' + item + '>' + item + '</option>');
            });
          }
        });

        form.val('form-group', {
          "institute": POPUP_DATA.institute,
          "speciality": POPUP_DATA.speciality,
        })

        form.render('select');
      },
      complete: function () {
        //loading.hide();
      }
    });

    if (POPUP_DATA.username.length > 0) {
      $('#f_institute').append('<option value=' + POPUP_DATA.institute + '>' + POPUP_DATA.institute + '</option>');
      $('#f_speciality').append('<option value=' + POPUP_DATA.speciality + '>' + POPUP_DATA.speciality + '</option>');
      form.val('form-group', {
        "username": POPUP_DATA.username,
        "name": POPUP_DATA.name,
        "sex": POPUP_DATA.sex,
        "institute": POPUP_DATA.institute,
        "speciality": POPUP_DATA.speciality,
        "class": POPUP_DATA.class,
        "phone_mac": POPUP_DATA.phone_mac,
        "pc_mac": POPUP_DATA.pc_mac,
      })
      document.getElementById("f_username").readOnly = true;
    }

    if ("undefined" == typeof POPUP_DATA.class) {
      $("#f_class").hide();
    }

    form.render(null, 'form-group');

    laydate.render({
      elem: '#form-group-date'
    });

    /* 自定义验证规则 */
    form.verify({
      username: function (value) {
        if (value.length < 5) {
          if ("undefined" != typeof POPUP_DATA.class) {
            return '请输入正确的学号';
          } else {
            return '请输入正确的教职工号';
          }
        }
      },
      class: function (value) {
        if ("undefined" != typeof POPUP_DATA.class) {

          if (! /^\d+\d+\d$/.test(value) || value.length != 4) {
            return '请输入正确的班级号，如：1501';
          }
        }
      },
      mac: function (value) {
        if (value.length != 0) {
          if (! /^[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}$/.test(value)) {
            return '请输入正确的MAC地址，如：00:00:00:00:00:00';
          }
        }
      },
    });

    /* 监听学院选择 */
    form.on('select(form-group-institute)', function (data) {
      console.log(data);
      $("#f_speciality").find("option").remove();
      $('#f_speciality').append("<option value=''>请选择专业</option>");
      layui.each(specialities_list, function (index, item) {
        if (data.value == item.institute) {
          layui.each(item.specialities, function (index, item) {
            $('#f_speciality').append('<option value=' + item + '>' + item + '</option>');
          });
          return true;
        }
      });
      form.render('select');
    });

    /* 监听提交 */
    form.on('submit(form-group-submit)', function (data) {
      var post_data = data.field;

      if (POPUP_DATA.username.length > 0) {
        post_data.action = 'mod';
      } else {
        post_data.action = 'add';
      }

      if ("undefined" != typeof POPUP_DATA.class) {
        var des_api = 'students';
      } else {
        var des_api = 'teachers';
      }
      admin.post({
        api: des_api,
        data: post_data,
        success: function (res) {
          if (res.code == 200) {
            layer.msg('操作成功');
          } else {
            layer.msg('操作失败');
          }
        },
      });

      return false;
    });


    /* 监听重置 */
    $('#f_reset')[0].onclick = function () {

      $('#f_sex_m')[0].checked = false;
      $('#f_sex_w')[0].checked = false;
      $("#f_speciality").find("option").remove();
      $('#f_speciality').append("<option value=''>请选择专业</option>");
      layui.each(specialities_list, function (index, item) {
        if (POPUP_DATA.institute == item.institute) {
          layui.each(item.specialities, function (index, item) {
            $('#f_speciality').append('<option value=' + item + '>' + item + '</option>');
          });
          return true;
        }
      });

      form.val('form-group', {
        "username": POPUP_DATA.username,
        "name": POPUP_DATA.name,
        "sex": POPUP_DATA.sex,
        "institute": POPUP_DATA.institute,
        "speciality": POPUP_DATA.speciality,
        "class": POPUP_DATA.class,
        "phone_mac": POPUP_DATA.phone_mac,
        "pc_mac": POPUP_DATA.pc_mac,
      });

      form.render('select');
      form.render('radio');
      return false;
    };

  });
</script>